<template>
	<view class="kui-w-full kui-h-full">
		<kui-page :custom-header="false">
			<template v-slot:body>
				<view class="kui-w-full kui-h-full">
					<view class="kui-my-3 kui-flex">
						<kui-text>暗黑模式：</kui-text>
						<kui-switch v-model="state.modeChecked" @change="changeMode"></kui-switch>
					</view>
					<kui-space :gap="[30,0]" direction="column">
						<kui-cell-group title="普通对话框">
							<kui-cell title="基本用法" :show-right-icon="false" @click="baseState.methods.onClick('对话框标题', '这是基本用法演示', 'normal', 'row')"></kui-cell>
							<kui-cell title="无标题对话框" :show-right-icon="false" @click="baseState.methods.onClick('', '这是无标题对话框', 'normal', 'row')"></kui-cell>
							<kui-cell title="垂直按钮组对话框" :show-right-icon="false" @click="baseState.methods.onClick('提示', '这是垂直按钮组对话框', 'normal', 'column')"></kui-cell>
							<kui-cell title="富文本内容对话框" :show-right-icon="false" @click="baseState.methods.onClick('富文本', 'richtext', 'normal', 'row')"></kui-cell>
						</kui-cell-group>
						<kui-cell-group title="内容对齐">
							<kui-cell title="内容居左对齐" :show-right-icon="false" @click="baseState.methods.onClick('对话框标题', '内容居左对齐', 'normal', 'row', 'margin', 'left')"></kui-cell>
							<kui-cell title="内容居中对齐" :show-right-icon="false" @click="baseState.methods.onClick('对话框标题', '内容居中对齐', 'normal', 'row', 'margin', 'center')"></kui-cell>
							<kui-cell title="内容居右对齐" :show-right-icon="false" @click="baseState.methods.onClick('对话框标题', '内容居右对齐', 'normal', 'row', 'margin', 'right')"></kui-cell>
						</kui-cell-group>
						<kui-cell-group title="对话框类型">
							<kui-cell title="提示对话框" :show-right-icon="false" @click="baseState.methods.onClick('温馨提示', '这是提示对话框', 'tips', 'column')"></kui-cell>
							<kui-cell title="编辑对话框" :show-right-icon="false" @click="baseState.methods.onClick('请输入姓名', '这是编辑对话框', 'edit', 'row')"></kui-cell>
						</kui-cell-group>
						<kui-cell-group title="按钮组用法">
							<kui-cell title="普通类型" :show-right-icon="false" @click="baseState.methods.onClick('提示', '这是普通类型按钮组', 'normal', 'row', 'margin')"></kui-cell>
							<kui-cell title="贴边类型" :show-right-icon="false" @click="baseState.methods.onClick('提示', '这是贴边类型按钮组', 'normal', 'row', 'no-margin')"></kui-cell>
							<kui-cell title="按钮插槽" :show-right-icon="false" @click="slotState.methods.onClick('提示', '这是通过按钮插槽自定义的底部按钮', 'normal', 'row', 'no-margin', 'left')"></kui-cell>
						</kui-cell-group>
						<kui-cell-group title="">
							<kui-text color="hsl(213,10.00%, 56.86%)">示例数据为组件支持的部分数据，详细支持数据请参考组件源码和组件文档</kui-text>
						</kui-cell-group>
					</kui-space>
				</view>
			</template>
		</kui-page>
		<kui-dialog v-model:show="baseState.state.show" :title="baseState.state.title" :content="baseState.state.content" :type="baseState.state.type" :placeholder-text="baseState.state.placeholderText" :footer-direction="baseState.state.footerDirection" :mode="state.mode" :footer-type="baseState.state.footerType" :contentAlign="baseState.state.contentAlign"></kui-dialog>
		<kui-dialog ref="slotDialog" v-model:show="slotState.state.show" :title="slotState.state.title" :content="slotState.state.content" :type="slotState.state.type" :placeholder-text="slotState.state.placeholderText" :footer-direction="slotState.state.footerDirection" :mode="state.mode" :footer-type="slotState.state.footerType" :contentAlign="slotState.state.contentAlign" :titleAlign="slotState.state.titleAlign">
			<template v-slot:footer>
				<view class="kui-p-3 kui-w-full kui-flex kui-justify-end">
					<kui-button type="primary" text shape="square" @click="slotState.methods.cancel">取消</kui-button>
					<kui-button type="primary" text shape="square" @click="slotState.methods.confirm">确定</kui-button>
				</view>
			</template>
		</kui-dialog>
	</view>
</template>

<script lang="ts">
	import {
		reactive,
		getCurrentInstance
	} from 'vue';
	
	export default {
		setup() {
			const {
				proxy
			}: any = getCurrentInstance();
			
			const baseState = {
				state: reactive({
					show: false,
					title: '',
					content: '',
					type: 'normal',
					placeholderText: '请输入姓名',
					footerDirection: 'row',
					footerType: 'margin',
					contentAlign: 'center'
				}),
				methods: {
					onClick(title: string = '', content: string = '', type: string = 'normal', footerDirection: string = 'row', footerType: string = 'margin', contentAlign: string = 'center') {
						baseState.state.show = true;
						baseState.state.title = title;
						baseState.state.content = content;
						baseState.state.type = type;
						baseState.state.placeholderText = title;
						baseState.state.footerDirection = footerDirection;
						baseState.state.footerType = footerType;
						baseState.state.contentAlign = contentAlign;
						if (content === 'richtext') {
							baseState.state.content = "<p style=\"color: blue\">这是富文本内容</p>";
						}
					}
				}
			};
			
			const slotState = {
				state: reactive({
					show: false,
					title: '',
					content: '',
					type: 'normal',
					placeholderText: '请输入姓名',
					footerDirection: 'row',
					footerType: 'margin',
					contentAlign: 'center',
					titleAlign: 'left'
				}),
				methods: {
					onClick(title: string = '', content: string = '', type: string = 'normal', footerDirection: string = 'row', footerType: string = 'margin', contentAlign: string = 'center') {
						slotState.state.show = true;
						slotState.state.title = title;
						slotState.state.content = content;
						slotState.state.type = type;
						slotState.state.placeholderText = title;
						slotState.state.footerDirection = footerDirection;
						slotState.state.footerType = footerType;
						slotState.state.contentAlign = contentAlign;
						if (content === 'richtext') {
							slotState.state.content = "<p style=\"color: blue\">这是富文本内容</p>";
						}
					},
					cancel() {
						proxy.$refs['slotDialog'].cancel();
					},
					confirm() {
						proxy.$refs['slotDialog'].confirm();
					}
				}
			};
			
			const state = reactive({
				mode: 'light',
				modeChecked: false
			});
			
			const changeMode = () => {
				state.mode = state.mode == "light" ? "dark" : "light";
				// provide("changeMode", data.mode);
				uni.$emit("changeMode", state.mode);
			};
			
			return {
				baseState,
				slotState,
				state,
				changeMode
			}
		}
	}
</script>

<style>

</style>
